<template>
    <div class="box">
        <div class="top">
            <!-- 头像和用户名 -->
            <div class="userinfo">
                <div>
                    <div class="avatar">
                        <img src="../../assets/dengluhou.png" alt="">
                    </div>
                    <div class="login_p">
                        <p>{{nickname}}</p>
                        <p class="username">用户名：{{username}}</p>
                    </div>
                </div>
            </div>
            <!-- 设置 -->
            <div class="set" @click="showPopup">
                <img src="../../assets/set.png" alt="">
                <div class="txt">设置</div>
            </div>
            <!-- 设置的弹出层 -->
            <van-popup v-model="show" round position="right" :style="{ height: '100%' ,width:'60.1%'}">
                <div>
                    <span class="shuoming">账号</span>
                    <van-cell-group inset>
                        <!-- 有跳转，待写 -->
                        <van-cell icon="edit" @click="rename_dialog()" title="修改昵称" value="" label="" is-link to=""/>
                        <van-cell icon="closed-eye" title="修改登录密码" value="" label="" is-link to="/my/repassword"/> 
                        <van-cell icon="contact" @click="removeuser()" title="注销账号" value="" label="" is-link to=""/>
                    </van-cell-group>
                
                    <span class="shuoming">通用</span>
                    <van-cell-group inset>
                        <van-cell icon="envelop-o" title="我的收货地址" value="" label="" is-link to="/address"/>
                        <!-- <van-cell icon="other-pay" @click="set()" title="背景设置" value="" label="" is-link to=""/> -->
                    </van-cell-group>

                    <span class="shuoming">我的喜欢</span>
                    <van-cell-group inset>
                        <van-cell icon="like-o" title="我的喜欢视频" value="" label="" is-link to="/likedvideo"/>
                        <!-- <van-cell icon="other-pay" @click="set()" title="背景设置" value="" label="" is-link to=""/> -->
                    </van-cell-group>

                    <van-cell-group inset>
                        <van-cell icon="revoke" @click="exit()" title="退出登录" value="" label="" is-link to=""/>
                    </van-cell-group>
                </div>
            </van-popup>
            <!-- 修改名称的对话框 -->
            <van-dialog v-model="dialog_show" title="亲亲要修改昵称么？"
            :show-cancel-button="true"
            :close-on-click-overlay="true"
            :show-confirm-button="true"
            @confirm="onConfirm">
                <van-field
                    v-model="value"
                    label="昵称"
                    left-icon="smile-o"
                />
            </van-dialog>
            <!-- 收藏，喜欢，零钱 -->
            <div class="top_bottom">
                <div class="shoucang">
                    <!-- 收藏 -->
                    <img src="../../assets/shoucang.png" alt="">
                    <div class="top_b_p">收藏</div>
                </div>
                <div class="my_like" @click="tolike">
                    <!-- 喜欢 -->
                    <img src="../../assets/like.png" alt="" @click="tolike()">
                    <div class="top_b_p">喜欢</div>
                </div>
                <div class="money" @click="recharge()">
                    <!-- 零钱 -->
                    <img src="../../assets/money.png" alt="">
                    <div class="top_b_p">零钱:￥{{money}}</div>
                </div>
                
            </div>
            <!-- 零钱的对话框 -->
            <van-dialog v-model="recharge_show" title="我的零钱"
            :show-cancel-button="true"
            :close-on-click-overlay="true"
            :show-confirm-button="true"
            @confirm="onConfirm_rechange">
                <van-field left-icon="balance-o" label="余额（元）" :value=this.money readonly />
                <van-field
                    v-model="charge_value"
                    label="充值"
                    left-icon="refund-o"
                />
                <van-radio-group v-model="radio" direction="horizontal">
                    <van-radio name="1">支付宝支付</van-radio>
                    <van-radio name="2">微信支付</van-radio>
                </van-radio-group>
            </van-dialog>

            <!-- 我的订单 -->
            <div class="orders">
                <div class="title">我的订单</div>
                <div class="icon">
                    <div @click="d_pay()">
                        <van-icon name="cash-on-deliver" size="35" :badge="record_c.length" />
                        <div>待付款</div>
                    </div>
                    <div @click="d_goods()">
                        <van-icon name="send-gift-o" size="35" :badge="record_goods.length" />
                        <div>待发货</div>
                    </div>
                    <div @click="d_receiving()">
                        <van-icon name="logistics" size="35" :badge="record_receiving.length" />
                        <div>待收货</div>
                    </div>
                    <div @click="d_sales()">
                        <van-icon class="lateicon" name="after-sale" size="35" :badge="record_sales.length" />
                        <div>退款/售后</div>
                    </div>
                </div>
                <!-- 待付款的对话框 -->
                <van-dialog v-model="dialog_pay" title="待付款"
                :show-cancel-button="true"
                :close-on-click-overlay="true"
                :show-confirm-button="true"
                >
                    <div class="record">
                        <div class="record_child" style="height:200px" v-for="order in record_c" :key="order.id">
                            <img :src="order.banner" alt="">
                            <div class="record_im">
                                <div style="margin-bottom:10px">产地：{{order.supplier}}</div>
                                <div>{{order.name}}</div>
                            </div>
                            <div class="wait_pay">
                                <div>单价：{{order.price}}</div>
                                <br>
                                <div>数量：{{order.number}}</div>
                                <br>
                                <div>总价：{{order.subtotal}}</div>
                                <van-button @click="comfirm_pay(order.subtotal,order.id)" type="warning" round>立即支付</van-button>
                            </div>
                            
                        </div>
                    </div>
                </van-dialog>
                <!-- 待发货的对话框 -->
                <van-dialog v-model="dialog_goods" title="待发货"
                :show-cancel-button="true"
                :close-on-click-overlay="true"
                :show-confirm-button="true"
                >
                    <div class="record">
                        <div class="record_child" v-for="order_g in record_goods" :key="order_g.id">
                            <img :src="order_g.banner" alt="">
                            <div class="record_im">
                                <div style="margin-bottom:10px">产地：{{order_g.supplier}}</div>
                                <div>{{order_g.name}}</div>
                            </div>
                            
                        </div>
                    </div>
                </van-dialog>
                <!-- 待收货的对话框 -->
                <van-dialog v-model="dialog_receiving" title="待收货"
                :show-cancel-button="true"
                :close-on-click-overlay="true"
                :show-confirm-button="true"
                @confirm="onConfirm_receiving"
                >
                    <div class="record">
                        <div class="record_child" v-for="order_re in record_receiving" :key="order_re.id">
                            <img :src="order_re.banner" alt="">
                            <div class="record_im">
                                <div style="margin-bottom:10px">产地：{{order_re.supplier}}</div>
                                <div>{{order_re.name}}</div>
                            </div>
                            
                        </div>
                    </div>
                </van-dialog>
                <!-- 退款/售后的对话框 -->
                <van-dialog v-model="dialog_sales" title="退款/售后" 
                :lockScroll="true"               
                :show-cancel-button="true"
                :close-on-click-overlay="true"
                :show-confirm-button="true"
                >
                    <div class="record">
                        <div class="record_child" v-for="order_sa in record_sales" :key="order_sa.id">
                            <img :src="order_sa.banner" alt="">
                            <div class="record_im">
                                <div style="margin-bottom:10px">产地：{{order_sa.supplier}}</div>
                                <div>{{order_sa.name}}</div>
                            </div>
                        </div>
                    </div>
                </van-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import {getcookie, removecookie,setcookie} from '@/utils/cookie'
import { rename,deluser,recharge,findmoney,my_orders,find_receiving_orders,
change_receiving,find_goods_orders,confirm_goods,find_sales_orders,setmoney,
change_my_orders,operate} from "@/request"
import Vue from 'vue';
import { Popup } from 'vant';
import { Cell, CellGroup } from 'vant';
import { Dialog } from 'vant';
import { Field } from 'vant';
import {Toast} from 'vant';
import { Step, Steps } from 'vant';
import { RadioGroup, Radio } from 'vant';
import { Icon } from 'vant';
import { Button } from 'vant';

Vue.use(Button);
Vue.use(Icon);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Step);
Vue.use(Steps);
Vue.use(Toast);
Vue.use(Field);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Popup);
export default {
    data(){
        return{
            username:'',
            nickname:'',
            show: false,
            dialog_show:false,
            recharge_show:false,
            value:'',
            active:'',
            radio: '',
            charge_value:'',
            money:'',

            dialog_pay:false,
            dialog_goods:false,
            dialog_receiving:false,
            dialog_sales:false,

            //记录待付款
            record_c:[],
            //记录待发货
            record_goods:[],
            //记录待收货
            record_receiving:[],
            //记录售后
            record_sales:[]
        }
    },
    methods:{
        showPopup() {
            this.show = true;
        },
        //退出账号
        exit(){
            Dialog.confirm({
                // var content='@'+
                title: '退出？',
                message: '@'+this.username,
                }).then(() => {
                    // on confirm
                    removecookie("nickname")
                    removecookie("username")
                    this.$router.push('/My/login')
                }).catch(() => {
                    // on cancel
                });
        },
        //注销账号
        removeuser(){
            Dialog.confirm({
                // var content='@'+
                title: '真的要注销账号吗？',
                message: '@'+this.username,
                }).then(() => {
                    // on confirm
                    //发送请求，删除data中的数据
                    deluser().then(data=>{
                        if(data.code===1){
                            Toast.success(data.msg)
                        }
                    })                 
                    this.$router.push('/My/login')
                }).catch(() => {
                    // on cancel
                });
        },
        rename_dialog(){
            this.dialog_show=true
        },
        //修改名字的确认按钮
        onConfirm(){
            rename(this.value).then(data=>{
                if(data.code===1){
                    Toast.success(data.msg)
                    removecookie('nickname')
                    setcookie('nickname',this.value,7200)
                    this.nickname=getcookie('nickname')
                    this.value=''
                }
            })
        },
        //充值
        recharge(){
            this.recharge_show=true
        },
        //支付按钮
        onConfirm_rechange(){
            if(this.radio==="1")
            {
                //支付宝支付
                // Toast.success('正在使用支付宝支付')
                Toast.loading({
                    message: '正在使用支付宝支付...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
            }
            else{
                //微信支付
                Toast.loading({
                    message: '正在使用微信支付...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
            }
            this.Recharge()
            this.charge_value=''
            this.radio=''
        },
        //充值的函数
        async Recharge(){
            if(this.charge_value==="0"||!this.charge_value){
                Toast.fail('充值失败，请输入正确的金额')
            }
            else if(!this.radio){
                Toast.fail('请选择充值方式')
            }
            else{
                await recharge(this.charge_value).then(data=>{
                if(data.code===1)
                {
                    Toast.success(data.msg)
                }
                })
                await findmoney().then(data=>{
                    this.money=data.money
                })
            }
        },
        d_pay(){
            this.dialog_pay=true
        },
        d_goods(){
            this.dialog_goods=true
        },
        d_receiving(){
            this.dialog_receiving=true
        },
        d_sales(){
            this.dialog_sales=true
        },
        tolike()
        {
            this.$router.push('/likedvideo')
        },
        //待付款的支付按钮
        comfirm_pay(money_value,id){
            Dialog.confirm({
                title:'确认支付',
                message:'你确定要支付商品吗?',
            })
            .then(()=>{
                console.log(this.money)
                var value=parseFloat(money_value)
                if(operate(this.money,value,'-')>=0)
                {
                    this.money = operate(this.money,value,'-')
                    console.log(this.money.toFixed(2))
                    Toast.success('支付成功')
                    
                    setmoney(this.money).then(data=>{
                        console.log(data)
                    })
                    //再删除支付的商品
                    change_my_orders(id)
                }else{
                    Toast.fail('余额不足,支付失败,请充值')
                }
                })
                .catch(()=>{
                Toast.fail('已取消')
            })
        },
        //待收货确认按钮
        onConfirm_receiving(){
            confirm_goods().then(data=>{
                Toast.success('收货成功')
            })
        }
    },
    created(){
        this.username = getcookie('username')
        this.nickname = getcookie('nickname')
        if(!this.username) {
            this.$router.push('/my/login')
        }
        findmoney().then(data=>{
            if(data.money){
                this.money=data.money
            }
            else{
                this.money=0.00
            }
        })
        my_orders().then(data=>{
            this.record_c=data
        })
        find_goods_orders().then(data=>{
            this.record_goods=data
        })
        change_receiving()
        find_receiving_orders().then(data=>{
            this.record_receiving=data
        })
        find_sales_orders().then(data=>{
            this.record_sales=data
        })
    }
}
</script>

<style scoped>
.box{
    padding: 10px;
    background-color: rgb(246, 246, 246);
    height: 680px;
}
.top{
    position: relative;
}
.top img{
    width: 60px;
    height: 60px;
}
.userinfo div{
    display: inline-block;
}

.login_p{
    margin-left:10px ;
}
.pri_p{
    position: relative;
    top:-23px;
    margin-left:10px ;
}
.username{
    position: relative;
    top:-5px;
    font-size: 14px;
}
.set{
    position:absolute;
    top:10px;
    right: 5px;
}
.set img{
    width: 28px;
    height: 28px;
}
.van-popup{
    background-color: #eee;
}
.van-popup>div{
    margin: 50px 0px 20px 0px;
}
.shuoming{
    margin-left:24px;
}
.van-cell-group{
    margin-top:8px ;
    margin-bottom:25px;
}

.txt{
    position: relative;
    left: -0.5px;
    font-size: 14px;
}
.top_bottom img{
    width: 40px;
    height: 40px;
}
.top_bottom>div{  
    position: relative;
    display: inline-block;
    margin: 0 20px ;
}
/* 文字移动 */
.shoucang div{
    position: relative; 
    left: 3px; 
    font-size: 15px;
}
.my_like div{
    position: relative; 
    left: 5px;
    font-size: 15px;
}
.money div{
    position: relative;
    left:-15px
}
.orders{
    height: 120px;
    margin-top:10px;
    background-color: white;
    border-radius:15px ;
}
.title{
    position: relative;
    top:5px;
    width: 90%;
    margin: 0 auto;
    font-weight: bold;
}
.icon{
    margin: 0 auto;
    margin-top:20px ;
    width: 90%;
}
.icon>div{
    display: inline-block;
    margin: 0 22px;
}
.icon .van-icon{
    position: relative;
    left: 8px;
}
.lateicon
{
    position: relative;
    left: 17px;
}
.van-radio-group{
    height: 50px;
    width: 230px;
    margin: 0 auto;
}
.record{
    height: 300px;
    overflow-y: scroll;
}
.record_child{
    margin:15px auto ;
    width: 90%;
    height: 140px;
    background: #eee;
    border-radius:20px ;
}
.record_child img{
    width: 120px;
    height: 110px;
    position: relative;
    top:15px;
    left:10px
}
.record_im{
    display: inline-block;
    position: relative;
    left: 18px;
    top:10px;
    width: 140px;
    height: 120px;
}
.wait_pay{
    position: relative;
    left: 26px;
    top:10px;
    width:250px;
}
.wait_pay>div{
    display:inline-block;
}
.van-button{
    width: 120px;
    position: relative;
    left: 40px;
    top:-30px;
}
</style>